import classNames from 'classnames'
import styles from './edit.module.scss'
import { Flex } from 'antd'
import { useEffect, useState } from 'react'
import { EditOutlined, createFromIconfontCN } from '@ant-design/icons'
import { Outlet } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'
// import DefaultContentComponent from './components/base-info'
// import React from 'react'

const Edit = () => {
  const [select_index, setSelectIndex] = useState(0)
  // const [EditContentComponent, setEditContentComponent] = useState<React.LazyExoticComponent<React.ComponentType<{ a: '' }>> | undefined>(undefined)
  const IconFont = createFromIconfontCN({
    scriptUrl: ['//at.alicdn.com/t/c/font_3515098_lsx5wphvzwk.js']
  })
  const defaultIconStyle = { fontSize: '1.25rem', marginRight: '0.625rem' }
  const funcList = [
    { id: 1, label: '基础信息', title: '修改资料', icon: <EditOutlined style={defaultIconStyle} />, components: 'base' },
    { id: 2, label: '修改头像', title: '修改头像', icon: <IconFont type="icon-xiugaitouxiang" style={defaultIconStyle} />, components: 'avatar' }
  ]
  const navigate = useNavigate()

  /**
   *
   */
  const selectFunc = async (index: number) => {
    setSelectIndex(index)

    navigate(`${funcList[index].components}`)
    // const URL = `./components/${funcList[index].components}`
    // const Compontents = React.lazy(() => import(/* @vite-ignore */ `${URL}`))
    // setEditContentComponent(() => Compontents)
    // // const module = await import(/* @vite-ignore */ `./components/${funcList[index].components}`)
    // // setEditContentComponent(() => module.default)
  }

  useEffect(() => {
    selectFunc(0)
  }, [])

  return (
    <div className={classNames(styles.box_edit)}>
      <div className={classNames(styles.edit_body)}>
        <Flex vertical={false}>
          <div className={classNames(styles.func_box)}>
            {funcList.map((item, index) => (
              <div key={item.id} className={classNames(styles.func_item, { [styles.selected_func]: select_index === index })} onClick={() => selectFunc(index)}>
                {item.label}
                {select_index === index && <div className={classNames(styles.triangle)}></div>}
              </div>
            ))}
          </div>
          <div className={classNames(styles.content)}>
            <div className={classNames(styles.title)}>
              {funcList[select_index].icon}
              {funcList[select_index].title}
            </div>
            <div className={classNames(styles.content_compontent)}>
              <Outlet />
              {/* {EditContentComponent ? <EditContentComponent a="" /> : <DefaultContentComponent />} */}
            </div>
          </div>
        </Flex>
      </div>
    </div>
  )
}

export default Edit
